<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学子商城,主页商品展示</title>
<style type="text/css">
#d0{
	width: 1000px;
	height: 376px;
	margin: 0px auto;
}
#d1{
	width: 611px;
	height: 376px;
	background-color: #e8e8e8;
	background-image: url("../images/itemCat/study_computer_img1.png");
	background-repeat: no-repeat;
	background-position: 270px 20px;
	background-size:330px 350px; 
	margin-left: 2px;
	margin-right: 10px;
	float: left;/* 左浮动,为了让块级元素在一行显示 */
}
#d3{
	width: 375px;
	height: 376px;
	float: left;
	background-color: #e8e8e8;
	background-image: url("../images/itemCat/study_computer_img2.png");
	background-repeat: no-repeat;
	background-position: 84px 112px;
	background-size:296px 232px;
	margin-right: 2px;
}
#d2{
	width: 245px;
	height: 232px;
	margin-top: 68px;
	margin-left: 36px;
	padding: 5px;
}
.p1{
	color: #333;/* 字体颜色 */
	font-size: 32px;/* 字号大小 */
	font-weight: lighter;/* 字体权重(粗细) */
	margin-bottom: 12px;
	font-family: "黑体";/* 字体种类 */
}
.p2{
	color: #666;
	font-family: "黑体";
	font-size: 12px;
	font-weight: lighter;
	margin-bottom: 1px;
	margin-top: 0px;
}
.p3{
	margin-bottom: 12px;
	color: #0aa1ed;
	font-size: 24px;
	font-weight: bold;
}
input{
	width: 132px;
	height: 40px;
	font-size: 20px;
	color: #fff;
	background-color: #0aa1ed;
	font-family: "黑体";
}
#d1:hover{
	background-size:400px 410px;
	background-position: 250px 0px;
}
</style>
</head>
<body>
	<div id="d0">
		<div id="d1">
			<div id="d2">
				<p class="p1">灵越 燃7000系列</p>
				<p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存</p>
				<p class="p2">英特尔HD显卡620含共享显卡内存</p>
				<p class="p3">￥4999.00</p>
				<input type="button" value="查看详情">
			</div>
		</div>
		<div id="d3">
			<div id="d2">
				<p class="p1">颜值 框不住</p>
				<p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存</p>
				<p class="p2">英特尔HD显卡620含共享显卡内存</p>
				<p class="p3">￥6888.00</p>
				<input type="button" value="查看详情">
			</div>
		</div>
	</div>
</body>
</html>




